<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2月24日</title>
    <link rel="icon shortcut" href="icon01.ico" type="image/x-icon">

</head>
<body>

    <audio src="testAudioKnock.m4a" alt="error" controls></audio>
    <p>音频标签audio <br> 音频文件testAudioKnock.m4a</p>

    <!--CSS-->
    <p id="a_001">用font-size设置字号为30px（默认大小是16px）</p>
    <p id="a_002">用font-weight设置700加粗，正常是400</p>
    <p id="a_003">用font-style设置字体样式倾斜italic</p>
    <p id="a_004">用font-family改变字体</p>
    <p id="a_005">font样式连写的顺序是有要求的：style weight size family</p>
    <p id="a_006">首行缩进text-indent，单位是px或者em，用px作为单位的话，比较麻烦，如果修改文本的字号，就要跟着改text-indent的值，才能看上去是“缩进两个字符”的样子。所以更推荐用em。</p>
    <a href="https://www.w3school.com.cn/index.html" id="a_007">用text-decoration的none属性值去掉链接的下划线</a>
    <p class="payMoreAttention">写到这里的时候体会到了选择器的优先级问题，在上面的a链接的CSS样式中，我用的是id选择器，用伪类选择器修改选中状态，写a:hover，但不生效，改为#a_007:hover生效了</p>

    <div class="box">
        Hello, I am text.
        文本在盒子中的显示位置，用text-align控制，有三种属性值：左对齐left 居中对齐center 右对齐right。写在文本的父元素（比如此例子中的div就是文本的父元素，如果文本是直接在裸奔在body里面，就直接设置body的text-align，另外，text-align无法让div等大盒子实现水平居中，大盒子需要用margin来操作）
    </div>
    <div class="father">
        <div class="son"></div>
    </div>
    <br>
    <div id="box-1" class="father">
        用line-height改变行高
    </div>
    <br>
    <div id="box-2">
        用line-height实现单行文本在盒子中垂直居中的原理：盒子高度400px，line-height设置400px
    </div>
    <p class="payMoreAttention">注意：如果是多行文本，就会溢出盒子，如果需要去除文本的上下边距，就直接写line-height: 1;</p>
    <p class="payMoreAttention">行高要注意样式层叠问题，如果先写line-height再写font，会导致line-height被覆盖，原因是完整的font其实包含了line-height，就是：font: style weight size(/line-height) family</p>
    <br>
    <p>后代选择器 CSS语法：选择器1 空格 选择器2</p>
    <div class="father01">
        <p>子代</p>
        <div>
            <p>孙子代</p>
        </div>
    </div>

    <br>
    <p>子代选择器 CSS语法：选择器1>选择器2</p>
    <div class="father02">
        <p>子代</p>
        <div>
            <p>孙子代</p>
        </div>
    </div>

    <br>
    <p>并集选择器 CSS语法：选择器1,选择器2</p>
    <p class="bingJi01">p标签</p>
    <div class="bingJi02">div标签</div>
    <div class="box01">背景图片 background-image</div>
    <p class="payMoreAttention">
        背景平铺 background-repeat
        <br>
        有4种平铺方式：repeat no-repeat repeat-x repeat-y
        <br>
        默认是no-repeat不平铺
        <br>
    </p>
    <div class="box02"></div>
    <p class="payMoreAttention">
        背景位置 background-posiition 
        <br>
        属性值有两种表示方式，可按先水平后竖直的顺序混用方位名词和数字
        <br>
        1、水平方向位置(left center right) 垂直方向位置(top center bottom)
        <br>
        2、数字px 原点是左上角 先水平，后竖直
    </p>
    <div class="box03"></div>

    <a href="#" class="link01">导航</a>

    <p class="payMoreAttention">盒模型</p>
    <div class="box04"></div>

    <p class="payMoreAttention">盒模型：新浪导航栏。重点：盒子高度的减法。a标签用了后代选择器：.box05 a<br>如果写多个a标签，中间换行了，在网页上会显示为标签之间有空格，如果不想要空格，就不要换行连着写。如果不用inline-block，而用flex布局，就不会有这些问题。<br>文字的font-size量取方法：直接量文字的高度作为font-size</p>

    <div class="box05">
        <a href="#">新浪导航</a><a href="#">新浪导航</a><a href="#">新浪导航字数不限</a><a href="#">新浪导航</a>
    </div>

    <div class="box06">
        自动内减：box-sizing: border-box
    </div>

    <p class="payMoreAttention">设置body的line-height为1，可清除浏览器默认的文字和边框之间的间隙</p>

    <div class="box07">
        <h2>最新文章/New Articles</h2>
        <ul>
            <li><a href="#">北京招聘网页设计，平面设计，php</a></li>
            <li><a href="#">体验JavaScript的魅力</a></li>
            <li><a href="#">jQuery世界来临</a></li>
            <li><a href="#">网页设计师的梦想</a></li>
            <li><a href="#">jQuery中的链式编程是什么</a></li>
        </ul>
    </div>

    <p class="payMoreAttention">margin外边距，方位顺序和padding一致</p>
    <div class="box08"></div>
    <p class="payMoreAttention">去除margin和padding的默认空隙，有两种方法，①是找具体标签对它设置margin:0和padding:0。②是直接用通配符选择器设置整个页面的*{margin:0; padding:0}</p>
    <p class="payMoreAttention">margin的三种典型现象</p>
    <ul>
        <li>左盒子和右盒子，相接触的margin正常叠加</li>
        <li>上盒子和下盒子：相接触的margin取它俩的大值</li>
        <li>塌陷（父盒子和子盒子）：子盒子的margin会作用在父盒子上，导致父子整体移动</li>
    </ul>

    <div class="box09">
        margin-right: 20px
    </div>

    <div class="box10">
        margin-left: 30px
    </div>
    
    <br><br>
    
    <div class="box11">
        margin-bottom: 20px
    </div>

    <div class="box12">
        margin-top: 30px
    </div>

    <p class="payMoreAttention">子盒子的margin-top: 50px。实际作用在父盒子上</p>
    <div class="box13">
        <div class="box13_son"></div>
    </div>

    <p class="payMoreAttention">塌陷现象的解决方法：</p>
    <ol>
        <li>给父元素设置border padding</li>
        <li>给父元素设置overflow: hidden</li>
        <li>将父元素设置为inline-block</li>
        <li>给父元素设置浮动float: left</li>
    </ol>

    <p class="payMoreAttention">1. 给父元素设置border-top或者padding-top或者在父盒子里写点文本，精髓就是将父和子的margin-top分隔开</p>
    <div class="box14">
        <div class="box14_son"></div>
    </div>

    <p class="payMoreAttention">2. 给父元素设置overflow: hidden</p>
    <div class="box15">
        <div class="box15_son"></div>
    </div>

    <p class="payMoreAttention">3. 将父元素设置为inline-block。精髓是只有互相嵌套的块元素会发生塌陷，让它不是块元素就好了。</p>
    <div class="box16">
        <div class="box16_son"></div>
    </div>
    
    <p class="payMoreAttention">4. 给父元素设置浮动float: left</p>
    <div class="box17">
        <div class="box17_son"></div>
    </div>
    

    <br><br><br><br><br><br><br><br><br><br><br><hr>

    <p class="payMoreAttention">
        <b>结构伪类选择器</b><br><br>
        选中【第一个】【li】元素<br>
        li:first-child{<br>
            background-color: orange;<br>
        }<br><br>
        选中【第x个】【li】元素<br>
        li:nth-child(x){<br>
            background-color: orange;<br>
        }<br><br>
        选中【倒数第x个】【li】元素<br>
        li:nth-last-child(x){<br>
            background-color: orange;<br>
        }<br><br>
        注意：<br>
        x可以写n，或者2n或者2n+1之类的，可以选中这些编号的。<br>
        如果写的是kn+c，要把kn写在前面，常数c写在后面，"5-n"这样的可能会出错<br><br>
        在一排包裹着a的li中，选中第一个a标签，要写：li:first-child a{}<br><br>
        nth-of-type(x)，可以替代nth-child(x)，在子元素类型不唯一的时候很好用（比如一排li里面夹了一个div）
    </p>
    <br>

    <p class="payMoreAttention">
        伪元素<br>
        ::before<br>
        ::after<br>
        必须设置content: ;属性<br>
        伪元素是inline元素<br>
    </p>
    <br>
    <div class="box18">
        此处是box18内部的内容。
    </div>
<div class="box30 clearfix">
    <p class="payMoreAttention">浮动布局：float: left/right</p>
    
        <img src="image01.png" class="img01 clearfix">示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本
    </div>
    <div class="box19 clearfix">浮动 左</div>
    <div class="box20 clearfix">浮动 右</div>
    <br><br><br><br><br><br><br><br><br><br><br>

    <p class="payMoreAttention">浮动元素的特点：</p>
    <ol>
        <li>会脱离标准流</li>
        <li>比标准流高半个级别，可以覆盖标准流中的元素</li>
        <li>下一个浮动元素会在上一个浮动元素后面左右浮动</li>
        <li>浮动元素浮动的位置会受到在它上面的元素的影响</li>
        <li>浮动元素的特点：一行可显示多个，可设置宽高（无论它之前是块、行内块、行内）</li>
    </ol>
    <br><br>
    <div class="header"></div>
    <div class="box21"></div>
    <div class="box22">
        <div class="box23"></div>
        <div class="box24"></div>
    </div>
    <br>
    <div class="box25">
        <div class="box26"></div>
        <div class="box27">
            <div class="box28"></div>
            <div class="box28"></div>
            <div class="box28"></div>
            <div class="box28"></div>
            <div class="box28"></div>
            <div class="box28"></div>
            <div class="box28"></div>
            <div class="box28"></div>
        </div>
    </div>
    
    <br><br>
    <p class="payMoreAttention">使用浮动做网页导航</p>
    <br>

    <ul class="float01">
        <li><a href="#">新闻1</a></li>
        <li><a href="#">新闻2</a></li>
        <li><a href="#">新闻3</a></li>
        <li><a href="#">新闻4</a></li>
        <li><a href="#">新闻5</a></li>
        <li><a href="#">新闻6</a></li>
        <li><a href="#">新闻7</a></li>
        <li><a href="#">新闻8</a></li>
    </ul>

    <br><br><br>
    <p class="payMoreAttention">清除浮动的方法：直接给父元素设置宽高、单伪元素和双伪元素：在父元素内容的最后加一个block并给这个block设置clear: both、伪元素替代block</p>
    <br>
    <div class="box29 clearfix">
        <div class="box29_son"></div>
    </div>

    <p class="payMoreAttention">定位 position</p>
    <div class="box31"></div>
    <div class="box32"></div>

    <p class="payMoreAttention">position: static是不能用方位属性移动的</p>
    <p class="payMoreAttention">position: relative 相对于元素原位置偏移，不脱离标准流</p>
    <p class="payMoreAttention">position: absolute 相对于最近的有定位的祖先元素偏移，脱离标准流</p>
    <p class="payMoreAttention">子绝父相</p>
    <div class="box33">
        <div class="box33_son"></div>
    </div>
    <br>
    <div class="box34">
        <div class="box34_son">HOT</div>
    </div>
    <p class="payMoreAttention">要求：用子绝父相实现任意宽度父子的子在父里水平和垂直都居中</p>
    <div class="box35">
        <div></div>
    </div>
    <p class="payMoreAttention">若只要水平或垂直居中，就把<br>transform: translate(-50%,-50%);<br>改成：<br>transform: translateX(-50%);<br>或<br>transform: translateY(-50%);</p>

    <div class="box36 clearfix">
        <ul>
            <li><a href="#">我要投资</a></li>
            <li><a href="#">平台介绍</a></li>
            <li><a href="#">新手专区</a></li>
            <li><a href="#" class="shouJiWeiJinSuo">手机微金所<div class="box36_son_son">二维码</div></a></li>
            <li><a href="#">个人中心</a></li>
        </ul>
    </div>

    <br><br><br><br>
    <p class="payMoreAttention">底部半透明遮罩效果</p>
    <p class="payMoreAttention">注意点：div元素本身不设置宽度，会默认占满父元素的一行，但在子绝父相脱离标准流后，若不设置宽度，宽度会由内容撑开，默认值是0，若要它继续占满父元素的一行，可将子div的宽度设置为父元素的宽度，或者width: 100%; </p>

    <div class="box37">
        <div class="box37_son"></div>
    </div>

    <img src="./aside.png" class="img02">

    <p class="payMoreAttention">用 z-index: 数字; 改变元素之间的层叠关系，永远最高的是999</p>
    <div class="box38">
        <div class="box38-red"></div>
        <div class="box38-blue"></div>
        <div class="box38-green"></div>
    </div>

    <p class="payMoreAttention">vertical-align是inline-block、inline元素的属性，不是父元素的属性</p>

    <p class="payMoreAttention">用 vertical-align修改默认的基线对齐baseline，解决图片和文字对不齐的问题。可改成top、middle、bottom，只适用于inline和inline-block，不适用于block</p>
    <input type="text" class="input01"><input type="button" value="百度一下" class="input01">
    <p class="payMoreAttention">上面这两个input标签的垂直对齐问题，除了可以用 vertical-align: top; 解决，还可以直接设置浮动float，它就好了</p>

    <img src="./image01.png" class="img03"><input type="text">
    <p class="payMoreAttention">上面的img和input标签的垂直对齐问题，用 vertical-align: bottom; 解决</p>

    <div class="box39">
        <img src="./image01.png" alt="">
    </div>

    <p class="payMoreAttention">上面的img和div标签的下边缘对齐问题，用 vertical-align: bottom; 解决。（也可以将图片转化成block元素，它自己就对齐了）</p>

    <div class="box40">
        <img src="./image01.png" alt="">
    </div>

    <p class="payMoreAttention">上面是用vertical-align:middle; 完成图片在父盒子里的垂直居中</p>

    <p class="payMoreAttention">鼠标光标类型（只是改了样式，不具备相应功能）：cursor: default、pointer、text、move</p>
    <div class="box41-default">默认箭头 default</div>
    <div class="box41-pointer">手指 pointer</div>
    <div class="box41-text">文字 text</div>
    <div class="box41-move">移动 move</div>

    <p class="payMoreAttention">
        边框圆角 border-radius: 数字px 或 数字% <br>
        从左上角顺时针赋值，若没有值，则看对角的
    </p>
    <div class="box42"></div>

    <p class="payMoreAttention">用border-radius和正方形盒子画正圆，50%和算出宽高一半直接写上都行</p>

    <div class="box43"></div>
    <div class="box44">胶囊按钮</div>

    <p class="payMoreAttention">溢出部分 overflow: visible hidden scroll auto</p>
    <p class="payMoreAttention">overflow: visible;</p>
    <div class="box45-visible">示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本</div>
    <br><br><br><br><br><br><br><br><br><br>
    <p class="payMoreAttention">溢出部分 overflow: hidden;</p>
    <div class="box45-hidden">示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本</div>    
    <p class="payMoreAttention">溢出部分 overflow: scroll;（缺陷：无论是否溢出都会显示滚动条）</p>
    <div class="box45-scroll">示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本</div>

    <p class="payMoreAttention">溢出部分 overflow: auto;（和scroll的区别是下边缘没有滚动条，当内容不溢出就没有滚动条）</p>
    <div class="box45-auto">示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本示例文本</div>

    <p class="payMoreAttention">
        元素的隐藏有2种方法：
        <ol>
            <li>visibility: hidden; </li>
            <li>display: none;</li>
        </ol>
    </p>

    <p class="payMoreAttention">
        用display: none;完成子盒子隐藏，鼠标移到父盒子内时，子盒子显示的效果<br>
        精髓：伪类选择器的名字这样写： .box46:hover .box46-son
    </p>
    
    <div class="box46">
    <div class="box46-son"></div>
    </div>

    <p class="payMoreAttention">元素整体透明度 opacity: 数字（透明0~1不透明）</p>
    <p class="payMoreAttention">边框合并 border-collapse: collapse; </p>

    <p class="payMoreAttention">用border的transparent属性值画三角形，三角形的高由border-bottom的数字px这项属性值决定</p>
    <div class="box47"></div>

    <p class="payMoreAttention">链接伪类选择器：</p>
    <a href="#" class="link02">示例链接：链接伪类选择器</a>
    <p class="payMoreAttention">链接伪类选择器的属性必须按以下顺序写：lvha</p>


    <p class="payMoreAttention">焦点伪类选择器：</p>
    <input type="text" class="input02">

    <p class="payMoreAttention">精灵图：将要显示的九宫格之类的，包含多个小图的东西，所有小图放在同一个大图里，将大图设为盒子的背景图片，盒子的高度和宽度与小图相等，盒子的background-position的取值是小图左上角坐标</p>

    <p class="payMoreAttention">用background-size设置图片显示尺寸</p>
    <ol class="ol01">
        <li>数字px</li>
        <div></div>
        <li>百分比 盒子自身width和height的百分比（用空格分隔）</li>
        <div></div>
        <li>contain 等比例缩放图片，不超出盒子，最大尺寸完整显示图片</li>
        <div></div>
        <li>cover 等比例缩放图片，可超出盒子，完全充满盒子</li>
        <div></div>
    </ol>
    <br>

    <p class="payMoreAttention">文字阴影 text-shadow 水平偏移px 垂直偏移px 模糊px 颜色</p>
    <div class="box48">示例文本</div>
    <br>

    <p class="payMoreAttention">盒子阴影 text-shadow [必]水平偏移px [必]垂直偏移px 模糊px 扩大px 颜色 inset将阴影改为内部阴影</p>
    <div class="box49"></div>
    <br>
    <p class="payMoreAttention">样式过渡，设置给元素本身，配合hover使用。设在默认：移入移出都有过渡，设在hover：仅移入有过渡 <br> transition: all 1s; 写all的话，颜色、尺寸都能过渡；把all换成具体属性名可具体设置，用逗号分隔，比如width 1s, background-color 2s</p>
    <div class="box50"></div>


    <p class="payMoreAttention">icon，注意要写在头文件中</p>
    <p class="payMoreAttention"></p>





















    <link rel="stylesheet" href="查缺补漏.css">
    <script src="查缺补漏.js" defer></script>
</body>
</html>